<template>
	<!-- <view class="mes" @click="todetail">

		<img :src="pic" class="headimg" />
		<view>
			<h2 class="title"> {{ title }} </h2>
			<view class="content">
				{{ content }}
			</view>
		</view>
		<view class="status cu-item text-red" v-if='status == 0'>
			<view class="action">
				<view class="cu-tag round bg-red light">匹配中</view>
			</view>
		</view>
		<view class="status cu-item text-green" v-else>
			<view class="action">
				<view class="cu-tag round bg-gradual-green light">已完成</view>
			</view>
		</view>
	</view> -->


	<!-- <div style="width: 100vw;height: 40px;"></div> -->
	<div @click="todetail" class="mes_card">
		<div class="mes_card_top">
			<div style="padding-top: 20px;padding-left: 20px;" class="decription">
				<img width="20" height="20" src="https://obscloud.ulearning.cn/resources/web/17138858891083214.png
">
				<div class="title">
					<p> {{ title }}</p>
				</div>
				<view class="status cu-item text-red" v-if='status == 0'>
					<view class="action">
						<view style="background-color: #e9f2f5!important;color: #2ba0c7;"
							class="cu-tag round bg-red light">匹配中</view>
					</view>
				</view>
				<view class="status cu-item text-green" v-else>
					<view class="action">
						<view style="background-color: #fbf6ed;color: #be9958;"
							class="cu-tag round bg-gradual-green light">
							已完成</view>
					</view>
				</view>
			</div>
			<!-- <div style="margin-top: 10px;" class="title">
				<p> {{ title }}</p>
			</div> -->
		</div>
		<div class="mes_card_body">
			<div>
				<img :src="pic" class="headimg" />
			</div>
			<div>
				<div class="card_content">
					{{ content }}
				</div>
			</div>
		</div>
		<div class="mes_card_bottom">
		</div>
	</div>
</template>

<script>
export default {
	props: ['title', 'pic', 'content', 'status', 'mesid'],
	data() {
		return {}
	},
	methods: {
		todetail() {
			uni.navigateTo({
				url: `/subpkg/mes_detail/mes_detail?id=${this.mesid}`
			})
		},
	}
};
</script>

<style scoped lang="less">
@media screen and (min-width: 1200px) {}

.decription {
	display: flex;
	justify-content: space-between;
	padding-right: 20px;
}

.card_content {
	padding: 20px;
}

.mes_card {
	width: 94%;
	margin: 3%;
	margin-right: 10px;
	background-color: #fff;
	margin-bottom: 20px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding-bottom: 20px;
}

.mes_card_top {
	width: 100%;
	margin-bottom: 20px;

}

.mes_card_bottom {
	width: 100%;
	display: flex;
	justify-content: end;
	padding-right: 20px;
	padding-top: 20px;
}

.mes_card_body {
	width: 90%;
	padding: 10%;
	display: flex;
	justify-content: start;
	flex-direction: row;
	background-color: #f3f7fa;
	padding: 10px;
	align-items: center;
	align-content: center;
	border-radius: 5px;

}

.meslist {
	position: relative;
	z-index: 1;
	padding: 18rpx;
}

/* 单个卡片 */
.mes {
	align-items: center;
	z-index: 5;
	display: flex;
	border-radius: 10rpx;
	padding-top: 3vh;
	padding-bottom: 3vh;
	box-shadow: 1px 3px 5px 3px #888888;
	background-color: #fefefe;
	margin: 15rpx;
}

.headimg {
	width: 60px;
	height: 60px;
	margin-left: 6rpx;
	border-radius: 10px;
	// margin-bottom: 10rpx;
}

.content {
	width: 490rpx;
	font-size: 40rpx;
	-webkit-line-clamp: 2;
	margin-left: 15rpx;

}

.title {
	font-weight: 600;
	font-size: 35rpx;
	margin-left: 40rpx;
}

.bg {
	width: 100%;
	height: 74%;
	z-index: 0;
	position: absolute;
}

.status {
	// margin-top: -15rpx;
	font-size: small;
	margin-right: 5rpx;
}
</style>